<template>
  <div class="pickTask">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">拣货任务管理</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="订单号" prop="khddh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_khddh"
                        placeholder="客户订单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="波次编号" prop="bcbh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_bcbh"
                        placeholder="波次编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="发运单号" prop="fybh">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_fybh"
                        placeholder="发运单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="订单类型" prop="fylx">
              <el-select v-model="autoVue_table_fylx"
                         filterable
                         remote
                         placeholder="请选择订单类型">
                <el-option
                  v-for="item in dialog.wmsPurchaseOrder"
                  :key="item.id"
                  :label="item.ddlx"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="生成状态" prop="jhrwzt">
              <el-select v-model="autoVue_table_jhrwzt"
                         placeholder="生成状态">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  v-for="item in PICKTASK.jhrwzt"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-form-item label="客户地址" prop="khdz">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_khdz"
                    placeholder="客户地址" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>-->
        <!--
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称" prop="khmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_khmc"
                    placeholder="客户名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="lxrdh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_lxrdh"
                    placeholder="联系人电话" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        -->
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="tableMultiPrint(s.row)"><i class="fa fa-print" aria-hidden="true"></i></el-button>
            <el-button type="info" size="mini" @click="dialogOpen(s.row)" v-if="(s.row.fyzt ===1 || s.row.fyzt ===2) && (s.row.jhrwzt === 0 || s.row.jhrwzt === 1) && (s.row.jhzt === 0 || s.row.jhzt ===1)">生成</el-button>
            <el-button type="info" size="mini" icon="search" @click="dialogSearchOpen(s.row)"></el-button>
          </template>
        </el-table-column>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="tableMultiPrint('')">多选打印</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog">
      <p slot="title">{{dialog.title}}拣货任务</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="account" label="账户类型">
              <el-select v-model="formDialog.account" placeholder="请选择">
                <el-option
                  v-for="item in SHELVESTASK.account"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ryid" label="人员">
              <el-select v-model="formDialog.ryid"
                         filterable
                         placeholder="请输入人员名称">
                <el-option
                  v-for="item in dialog.wmsqualityinspectionlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSearch" :close="dialogSearchInit">
      <p slot="title">{{dialogSearch.title}}拣货任务人员</p>
      <el-collapse>
        <el-collapse-item title="未完成明细" name="1">
          <s-table :table="tableSearch" ref="tableSearch" @http="tableWatch" :pagination="false" :control="false"></s-table>
        </el-collapse-item>
        <el-collapse-item title="已完成明细" name="2">
          <s-table :table="tableSearcher" ref="tableSearcher" @http="tableWatch" :pagination="false" :control="false"></s-table>
        </el-collapse-item>
      </el-collapse>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise, GetLodop} from '~/plugins/Tools';

  function __form () {
    return {
      ryid: { value: '', rule: [ 'vNull__change' ] },
      account: { value: '', rule: [ 'vNull__change' ] },
    };
  }
  export default AutoVue({
    name: 'task_pickTask-FEcarWms',
    head: {
      'title': '拣货任务管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 拣货任务 查看拣货任务信息' },
      ],
    },
    store: ['DICTIONARY_pickTask', 'PICKTASK', 'SHELVESTASK', 'DICTIONARY_shelvestask'],
    data: {
      table: {
        column: [ { label: '波次编号',
          prop: 'bcbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '订单渠道',
          prop: 'ddqdmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '发运单号',
          prop: 'fybh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '订单类型',
          prop: 'show_fylx',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '订单状态',
          prop: 'show_fyzt',
          minWidth: '0px',
          cRemarks: '0、初始 1、部分分配2、全部分配 3、部分发运4、全部发运5、订单取消6、订单完成',
          search: true },
        { label: '任务状态',
          prop: 'show_jhrwzt',
          minWidth: '0px',
          cRemarks: '拣货任务状态(0.初始,1.部分生成拣货任务,2.全部生成拣货任务)',
          search: true },
        { label: '客户编号',
          prop: 'khbh',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '客户名称',
          prop: 'khmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '联系人姓名',
          prop: 'lxrxm',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '联系人电话',
          prop: 'lxrdh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '客户地址',
          prop: 'khdz',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '客户订单号',
          prop: 'khddh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '创建时间',
          prop: 'cjsj',
          minWidth: '0px',
          cRemarks: '',
          type: 'DateRange',
          search: true },
        { label: '拆单状态',
          prop: 'show_cdzt',
          minWidth: '0px',
          cRemarks: '0、未拆单 1、已拆单',
          search: false },
        { label: '装箱状态',
          prop: 'show_zxzt',
          minWidth: '0px',
          cRemarks: '0、未装箱 1、部分装箱 2、全部装箱',
          search: false },
        { label: '拣货状态',
          prop: 'show_jhzt',
          minWidth: '0px',
          cRemarks: '0、初始 1、部分拣货 2、全部拣货',
          search: false },
        { label: '波次状态',
          prop: 'show_bczt',
          minWidth: '0px',
          cRemarks: '0、未加入 1、已加入',
          search: false },
        { label: '交货方式',
          prop: 'show_jhfs',
          minWidth: '0px',
          cRemarks: '0、发运 1、自提',
          search: false },
        { label: '批次状态',
          prop: 'show_dpczt',
          minWidth: '0px',
          cRemarks: '0、多批次 1、单批次',
          search: false }],
        url: '/wmspicking/pickingTaskList',
        key: 'id',
        tableColumn: 6,
        muti: true,
      },
      formDialog: __form(),
      dialog: {
        title: '生成',
        wmsqualityinspectionlist: '',
        wmsPurchaseOrder: '',
        row: {},
        ryid: '',
      },
      dialogSearch: {
        title: '查看',
        row: {},
        size: 'large',
      },
      tableSearch: {
        column: [ { label: '货品编号',
          prop: 'hpbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '货品名称',
          prop: 'hpmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '库位名称',
          prop: 'kwmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '货品批次',
          prop: 'hppc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '供应商名称',
          prop: 'gysmc',
          minWidth: '0px',
          cRemarks: '0、初始 1、部分分配2、全部分配 3、部分发运4、全部发运5、订单取消6、订单完成',
          search: true },
        { label: '生产日期',
          prop: 'scrq',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        { label: '入库时间',
          prop: 'rksj',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        { label: '拣货人',
          prop: 'jhr',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '拣货时间',
          prop: 'jhsj',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        ],
        tableColumn: 9,
        muti: false,
      },
      tableSearcher: {
        column: [ { label: '货品编号',
          prop: 'hpbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '货品名称',
          prop: 'hpmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '库位名称',
          prop: 'kwmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '货品批次',
          prop: 'hppc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '供应商名称',
          prop: 'gysmc',
          minWidth: '0px',
          cRemarks: '0、初始 1、部分分配2、全部分配 3、部分发运4、全部发运5、订单取消6、订单完成',
          search: true },
        { label: '生产日期',
          prop: 'scrq',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        { label: '入库时间',
          prop: 'rksj',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        { label: '拣货人',
          prop: 'jhr',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '拣货时间',
          prop: 'jhsj',
          minWidth: '0px',
          cRemarks: '',
          formatter: (row, column) => {
            return this.a.methods.formatterTime(row[column.property || column], 3);
          },
          search: false },
        ],
        key: 'id',
        tableColumn: 9,
        muti: false,
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (row) {
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_shelvesTask) {
              await this.USE('DICTIONARY_shelvesTask');
            }
          },
        ]);
        this.dialog.row = row;
        this.dialog.visible = true;
      },
      dialogSave () {
        this.VALIDATE('formDialog', async option => {
          option.ssydid = this.dialog.row.ssydid;
          option.fybh = this.dialog.row.fybh;
          option.lxrxm = this.dialog.row.lxrxm;
          option.khmc = this.dialog.row.khmc;
          option.khdz = this.dialog.row.khdz;
          option.lxrdh = this.dialog.row.lxrdh;
          option.ryid = this.formDialog.ryid;
          parseInt(option.ryid);
          delete option.account;
          let step = [];
          step.push(option);
          try {
            await this.post('/wmspicking/createPickingTask', step);
            this.dialogInit();
            this.tableWatch('table');
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        });
      },
      tableCreate (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将生成拣货任务', '确认生成拣货任务？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmspicking/createPickingTask', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      /*
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              await this.post('/wmslibraryarea/add', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmslibraryarea/edit', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      */
      dialogSearchInit () {
      },
      async dialogSearchOpen (row) {
        console.log('ssydid:' + row.ssydid);
        try {
          this.tableSetData('tableSearch', await this.get('/wmspicking/notCompleteTask/' + row.ssydid));
          this.tableSetData('tableSearcher', await this.get('/wmspicking/seeCompleteTask/' + row.ssydid));
        } catch (err) {
          console.log(err);
        };
        this.dialogSearch.visible = true;
      },
      dialogSearchSave () {
      },
      tableMultiPrint (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.ssydid);
        } else {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          };
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.ssydid);
          });
        }
        this.$confirm('您将打印拣货任务。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          let LODOP = GetLodop();
          const Left = 0;
          LODOP.PRINT_INIT('打印拣货任务');
          let json = await this.post('/wmspicking/printPicking', {
            ids: ids,
          });
          let index = 0;
          let data = json.contentList;
          for (let item of data) {
            let tddata = '';
            let xh = 0;
            for (let mx of item.wmsPrintPickingDetailList) {
              tddata += `<tr>
                        <td>${xh + 1}</td>
                        <td>${mx.libraryName}</td>
                        <td>${mx.goodsNum}</td>
                        <td>${mx.goodsName}</td>
                        <td>${mx.goodsBatch}</td>
                        <td>${mx.productionTime}</td>
                        <td>${mx.supplier}</td>
                        <td>${mx.pickMainUnit}</td>
                        <td>${mx.pickBoxUnit}</td>
                        </tr>`;
              xh++;
            }
            let top = 10;
            let left = 50;
            let HTML = `<html>
<head>
<style>
  th,td{
    border:1px solid #000;
    height:20px;
  }
  table{
    border:1px solid #000;
    margin-left:5px;
    width:99%;
    border-collapse:collapse;
  }
  .rowclass{
    margin: 5px;
    height:30px;
  }
</style>
</head>
<body>
<div id="dv1">
  <div class ="rowclass">
    <span>发运单号</span>
    <input style="width:15%" value="${data[index].shippingNum}"/>
    <span>客户名称</span>
    <input style="width:15%" value="${data[index].customer}"/>
    <span>联系人</span>
    <input style="width:15%" value="${data[index].contacts}"/>
    <span>联系电话</span>
    <input style="width:15%" value="${data[index].tel}"/>
  </div>
  <div class ="rowclass">
    <span>地址</span>
    <input style="width:15%" value="${data[index].address}"/>
    <span>总体积</span>
    <input style="width:15%" value="${data[index].totalVolume}"/>
    <span>总重量</span>
    <input style="width:15%" value="${data[index].totalWeight}"/>
    <span>打印时间</span>
    <input style="width:15%" value="${data[index].printTime}"/>
  </div>
  <div class ="rowclass">
    <span>集货库位</span>
    <input style="width:15%" value="${data[index].library}"/>
    <span>路线</span>
    <input style="width:15%" value="${data[index].route}"/>
  </div>
  <table>
  <caption>明细</caption>
  <tr>
    <th width="5%">序号</th>
    <th width="15%">库位名称</th>
    <th width="10%">货品编号</th>
    <th width="20%">货品名称</th>
    <th width="10%">货品批次</th>
    <th width="10%">生产日期</th>
    <th width="10%">供应商</th>
    <th width="10%">拣货数量(主单位)</th>
    <th width="10%">拣货数量(箱单位)</th>
  </tr>
  <tr>
  ${tddata}
</table>
<div class ="rowclass">
    <span>操作人</span>
    <input style="width:15%"/>
    <span>记录人</span>
    <input style="width:15%"/>
    <span>核对人</span>
    <input style="width:15%"/>
  </div>
</div>
</body>
</html>`;
            LODOP.NewPage();
            LODOP.ADD_PRINT_HTM(0, Left, '100%', '100%', HTML);
            index++;
          }
          LODOP.PREVIEW();
        });
      },
    },
    watch: {
      'formDialog.account': async function (account) {
        this.formDialog.ryid = '';
        if (account.length !== 0 && account === 0) {
          this.dialog.wmsqualityinspectionlist = await this.post('/wmsqualityinspectionlist/selectYh', {});
        }
        if (account.length !== 0 && account === 1) {
          let {contentList} = await this.post('/wmsqualityinspectionlist/selectPDADLByHz', {
          });
          this.dialog.wmsqualityinspectionlist = contentList;
        }
      },
    },
    mounted: async function () {
      console.log('picktast.vue');
      await AutoPromise([
        async () => {
          if (this.dialog.wmsPurchaseOrder.length === 0) {
            this.dialog.wmsPurchaseOrder = await this.post('/wmsshipmentorder/getPoLx', {
            });
          }
        },
        async () => {
          if (!this.DICTIONARY_pickTask) {
            await this.USE('DICTIONARY_pickTask');
          }
        },
      ]);
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .pickTask{
    width: 88vw;
    float: left;
  }
</style>
